<script setup>
import { ref } from 'vue'

const dl1 = ref(['HTML 实例', 'CSS 实例', 'JavaScript 实例', 'Ajax 实例', 'jQuery 实例', 'XML 实例', 'Java 实例'])
const dl2 = ref(['HTML 字符集设置', 'HTML ASCII 字符集', 'JS 混淆/加密', 'PNG/JPEG 图片压缩', 'HTML 拾色器', 'JSON 格式化工具', '随机数生成器'])
const dl3 = ref(['正则表达式入门教程', 'Python lambda (...', 'Java 注释', 'Bootstrap5 消息...', 'Python 按字母顺...', 'Python 删除字符...', 'git restore 命令'])
const dl4 = ref(['意见反馈', '免责声明', '关于我们', '文章归档'])
</script>

<template>
  <div class="runoob-block">
    <div class="runoob">
      <dl>
        <dt> 在线实例 </dt>
        <dd v-for="(item, index) in dl1" :key="index">
          ·
          <a href="/home" target="_blank">
            {{ item }}
          </a>
        </dd>
      </dl>
      <dl>
        <dt> 字符集&工具 </dt>
        <dd v-for="(item, index) in dl2" :key="index">
          ·
          <a href="/home" target="_blank">
            {{ item }}
          </a>
        </dd>
      </dl>
      <dl>
        <dt> 最近更新 </dt>
        <dd v-for="(item, index) in dl3" :key="index">
          ·
          <a href="/home" target="_blank">
            {{ item }}
          </a>
        </dd>
      </dl>
      <dl>
        <dt> 站点消息 </dt>
        <dd v-for="(item, index) in dl4" :key="index">
          ·
          <a href="/home" target="_blank">
            {{ item }}
          </a>
        </dd>
      </dl>
      <div class="search-share">
        <div class="app-download">
          <div>
            <strong>关注微信</strong>
          </div>
        </div>
        <div class="share">
          <img src="@/assets/img/qrcode.png" alt="" width="150" height="150">
        </div>
      </div>
    </div>
  </div>
  <div class="copyright">
    Copyright © 2013-2023
    <strong>
      <a href="/home" target="_blank">菜鸟教程</a>
    </strong>
    &nbsp;
    <strong>
      <a href="/home" target="_blank">runoob.com</a>
    </strong>
    All Rights Reserved. 备案号：
    <a href="https://beian.miit.gov.cn/" target="_blank">
      闽ICP备15012807号-1
    </a>
  </div>
</template>

<style scoped lang="scss">
$background-color: #f6f6f6;
$font-color: #999;
$border-color: #e4e4e4;

.runoob-block {
  margin-bottom: -50px;
  padding: 20px 395px 60px 280px;
  background-color: #fff;
  border-top: 1px solid $border-color;

  .runoob {
    display: flex;
    justify-content: space-evenly;

    dl {
      border-left: 1px solid $border-color;

      dt {
        margin-left: 33px;
        font-size: 18px;
        color: #666;
        font-weight: 500;
      }

      dd {
        margin-top: 12px;
        font-size: 15px;

        a {
          color: grey;
        }
      }
    }
  }

  .search-share {
    border-left: 1px solid $border-color;
    padding: 0 0 0 60px;

    .app-download strong {
      color: #666;
      font-size: 22px;
    }

    .share {
      margin-top: 25px;
      margin-left: 10px;
    }
  }
}

.copyright {
  width: 100vw;
  height: 41px;
  box-shadow: 0 -1px 1px #ececec;
  font-size: 14px;
  color: #999;
  background-color: #e4e4e4;
  padding: 20px 0;
  margin: 30px 0 0 0;
  text-align: center;
}

@media screen and (max-width:99.99rem) {
  .runoob-block {
    display: none;
  }

  .copyright {
    margin: 200px 0 0 0;
  }
}
</style>
